<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :title="$attrs.title" ref="userManageEdit" width="1000"
                 height="380" :saveFlag="false" :closeFlag="false" :fullscreen="true" :loading="loading">
      <template slot="body">
        <el-row>
          <el-col :span="15">
            <el-card>
              <!--                            <h2>关联需求</h2>-->
              <!--                            <div style="width: 100%;height:auto;min-height: 50px"></div>-->
              <!--                            <h2>关联项目</h2>-->
              <!--                            <div style="width: 100%;height:auto;min-height: 50px"></div>-->
              <h2 class="hClass">任务描述</h2>
              <div class="textDiv">
                <tipTap :value="formData.Desc" :showMenubar="false" :readonly="true"></tipTap>
              </div>
              <h2 class="hClass">根本原因</h2>
              <div class="textDiv">
                <span>{{formData.RootCause}}</span>
              </div>
              <h2 class="hClass">直接原因</h2>
              <div class="textDiv">
                <span>{{formData.DirectCause}}</span>
              </div>
              <h2 class="hClass">对应策略</h2>
              <div class="textDiv">
                <span>{{formData.CorrespondingStrategy}}</span>
              </div>
              <h2 class="hClass">规避策略</h2>
              <div class="textDiv">
                <span>{{formData.EvasiveStrategy}}</span>
              </div>
              <h2 class="hClass">任务状态</h2>
              <el-radio-group style="margin-top: 10px" v-model="formData.Status" @change="changeStatus"
                              size="medium">
                <el-radio-button :label="0">编辑</el-radio-button>
                <el-radio-button :label="1">未开始</el-radio-button>
                <el-radio-button :label="2">进行中</el-radio-button>
                <el-radio-button :label="3">已完成</el-radio-button>
                <el-radio-button :label="4">已暂停</el-radio-button>
                <el-radio-button :label="5">已取消</el-radio-button>
                <el-radio-button :label="6">已关闭</el-radio-button>
              </el-radio-group>
            </el-card>
          </el-col>
          <el-col :span="8" :offset="1">
            <el-card class="rightSpan">
              <el-row>
                <el-col :span="4">
                  <span>任务编号</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{formData.Id}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>阶段</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{statusFilterOptions(formData.Stage|'', 'TASK_STAGE')}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>来源</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{statusFilterOptions(formData.Source|'', 'TASK_SOURCE')}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>优先级</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{statusFilterOptions(formData.Level|'', 'LEVEL')}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>预计工时</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{formData.Tasktime + '时'}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>反馈分类</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{statusFilterOptions(formData.Type|'', 'TEST_TYPE')}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>反馈编号</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{formData.Testid}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>反馈标题</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{formData.Testname}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>起止日期</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{formatDatetime(formData.Started * 1000) + '至' + formatDatetime(formData.Ended * 1000)}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>状态</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{statusFilterOptions(formData.Status|'', 'TEST_STATUS')}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>创建人</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{formData.Userrealname}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>实施人</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{formData.Completerealname}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>检查人</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{formData.Acceptrealname}}</span>
                </el-col>
              </el-row>
            </el-card>
            <el-card>
              <h2 class="hClass">历史记录</h2>
              <ul style="margin-left: 20px;font-size: 16px">
                <li v-for="(item, index) in historyList" :key="index">{{item.Note}}</li>
              </ul>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </dialog-edit>
  </div>
</template>

<script>
import dialogEdit from '@/components/element/dialogEdit'
import projectTaskApi from "@/api/projectTaskApi";
import tipTap from "@/components/element/tipTap";
import * as format from '@/filters/index'
import {mapGetters} from "vuex";

export default {
  components: {
    dialogEdit,
    tipTap
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    },
    ...mapGetters(['dictionary']),
    statusList() {
      return (DictTypeCode) => {
        return this.dictionary.filter(item => item.DictTypeCode === DictTypeCode)
      }
    },
    statusFilterOptions() {
      return (cellValue, DictTypeCode) => {
        let filter = this.statusList(DictTypeCode).filter(it => it.DictId === cellValue.toString())
        if (filter.length > 0) {
          return filter[0].DictName
        }
        return ''
      }
    },
    formatDatetime() {
      return (val) => {
        return format.formatDatetime(val)
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    formData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      loading: false,
      activeNames: ['1', '2'],
      components: [
        {
          label: '名称',
          span: 24,
          placeholder: '请输入名称',
          prop: 'Name',
          value: 'Name',
          componentName: 'vxe-input'
        },
        {
          label: '描述',
          span: 24,
          placeholder: '请输入描述',
          prop: 'Summary',
          value: 'Summary',
          componentName: 'vxe-textarea',
          autosize: {
            minRows: 10
          }
        }
      ],
      historyList: []
    }
  },
  methods: {
    submitComment() {
      // todo 没有接口
    },
    changeStatus(val) {
      if (val === 0) {
        return
      }
      let obj = {
        id: this.formData.Id,
        Name: this.formData.Name,
        Type: this.formData.Type,
        Level: this.formData.Level,
        Moduleid: this.formData.Projectmoduleid,
        Status: this.formData.Status
      }
      projectTaskApi.status(obj).then(res => {
        this.$XModal.message({message: res.message, status: res.code === 1 ? 'success' : 'error'})
        this.$emit('search')
        if (res.code === 1) this.modalVisible = false
      })
    },
    getHistoryList() {
      // let query = {
      //     id: this.formData.Id
      // }
      // projectTaskApi.getHistory(query).then(res => {
      //     if (res && res.length !== 0) {
      //         this.historyList = res
      //     } else {
      //         this.historyList = []
      //     }
      this.loading = false
      // })
    }
  },
  watch: {
    'visible': {
      handler(val) {
        if (val) {
          this.loading = true
          this.getHistoryList()
        }
      }
    }
  }
}
</script>

<style scoped>
.textDiv {
  width: 100%;
  height: auto;
  min-height: 100px;
  margin: 10px 0px;
}

.hClass {
  color: #49586e;
  font-size: 20px;
}

.rightSpan span {
  font-size: 15px;
}

.rightSpan .el-row {
  margin-top: 10px;
}

.rightSpan .el-col:nth-child(2n) span {
  color: #65CEA7;
}
</style>
